<template>
  <div>
    <!--    <div class="gva-search-box">-->
    <!--      <el-form :inline="true" :model="searchInfo" class="demo-form-inline">-->
    <!--        <el-form-item>-->
    <!--          <el-button size="mini" type="primary" icon="el-icon-search" @click="onSubmit">查询</el-button>-->
    <!--          <el-button size="mini" icon="el-icon-refresh" @click="onReset">重置</el-button>-->
    <!--        </el-form-item>-->
    <!--      </el-form>-->
    <!--    </div>-->
    <div class="gva-search-box">
      <el-form ref="searchForm" :inline="true" :model="searchInfo">
        <el-form-item label="兑换状态">
          <el-select v-model="searchInfo.flag" clearable placeholder="请选择">
            <el-option
                v-for="item in flags"
                :key="item.value"
                :label="`${item.label}`"
                :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="兑换人">
          <el-input v-model="searchInfo.name" placeholder="路径"/>
        </el-form-item>
        <el-form-item label="卡号">
          <el-input v-model="searchInfo.card" placeholder="描述"/>
        </el-form-item>
        <el-form-item label="兑换时间">
          <el-date-picker
              v-model="searchInfo.modifiedOn"
              type="date"
              placeholder="选择日期"
              :disabled-date="disabledDate"
              :shortcuts="shortcuts"
          >
          </el-date-picker>
        </el-form-item>

        <el-form-item>
          <el-button size="mini" type="primary" icon="el-icon-search" @click="onSubmit">查询</el-button>
          <el-button size="mini" icon="el-icon-refresh" @click="onReset">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="gva-table-box">
      <div class="gva-btn-list">
        <!--        <el-button size="mini" type="primary" icon="el-icon-plus" @click="openDialog">新增</el-button>-->
        <el-popover v-model:visible="deleteVisible" placement="top" width="160">
          <p>确定要删除吗？</p>
          <div style="text-align: right; margin-top: 8px;">
            <el-button size="mini" type="text" @click="deleteVisible = false">取消</el-button>
            <el-button size="mini" type="primary" @click="onDelete">确定</el-button>
          </div>
          <template #reference>
            <el-button icon="el-icon-delete" size="mini" style="margin-left: 10px;"
                       :disabled="!multipleSelection.length">删除
            </el-button>
          </template>
        </el-popover>
      </div>
      <el-table
          ref="multipleTable"
          style="width: 100%"
          tooltip-effect="dark"
          :data="tableData"
          row-key="ID"
          @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55"/>
        <el-table-column align="left" label="卡号" prop="card" width="120"/>
        <el-table-column align="left" label="密码" prop="passwd" width="120"/>
        <el-table-column align="left" label="下单日期" prop="orderTime" width="200"/>
        <el-table-column align="left" label="兑换人" prop="name" width="120"/>
        <el-table-column align="left" label="电话" prop="phoneNumber" width="200"/>
        <el-table-column align="left" label="地址" prop="address" width="400"/>
        <el-table-column align="left" label="是否兑换" prop="flag" width="120">
          <template #default="scope">{{ formatBoolean(scope.row.flag) }}</template>
        </el-table-column>
        <el-table-column align="left" label="订单号" prop="order" width="200"/>
        <el-table-column align="left" label="是否发货" prop="mark" width="120">
          <template #default="scope">{{ formatBoolean(scope.row.mark) }}</template>
        </el-table-column>
        <el-table-column align="left" label="备注" prop="remark" width="120"/>
        <el-table-column align="left" label="兑换时间" prop="modifiedOn" width="300"/>

        <el-table-column align="left" label="按钮组">
          <template #default="scope">
            <el-button type="text" icon="el-icon-edit" size="small" class="table-button" @click="updateDzx(scope.row)">
              变更
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="gva-pagination">
        <el-pagination
            layout="total, sizes, prev, pager, next, jumper"
            :current-page="page"
            :page-size="pageSize"
            :page-sizes="[10, 30, 50, 100]"
            :total="total"
            @current-change="handleCurrentChange"
            @size-change="handleSizeChange"
        />
      </div>
    </div>
    <el-dialog v-model="dialogFormVisible" :before-close="closeDialog" title="弹窗操作">
      <el-form :model="formData" label-position="right" label-width="80px">
        <el-form-item label="兑换人:">
          <el-input v-model="formData.name" disabled clearable placeholder="请输入"/>
        </el-form-item>
        <el-form-item label="电话:">
          <el-input v-model="formData.phoneNumber" disabled clearable placeholder="请输入"/>
        </el-form-item>
        <el-form-item label="地址:">
          <el-input v-model="formData.address" disabled clearable placeholder="请输入"/>
        </el-form-item>
        <el-form-item label="订单:">
          <el-input v-model="formData.order" clearable placeholder="请输入"/>
        </el-form-item>
        <el-form-item label="是否发货:">
          <el-switch v-model="formData.mark" active-color="#13ce66" inactive-color="#ff4949" active-text="是"
                     inactive-text="否" clearable></el-switch>
        </el-form-item>
        <el-form-item label="备注:">
          <el-input v-model="formData.remark" clearable placeholder="请输入"/>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button size="small" @click="closeDialog">取 消</el-button>
          <el-button size="small" type="primary" @click="enterDialog">确 定</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import {createDzx, deleteDzx, deleteDzxByIds, findDzx, getDzxList, updateDzx} from '@/api/dzx' //  此处请自行替换地址
import infoList from '@/mixins/infoList'

const flags = [
  {
    value: 1,
    label: '是',
    type: 'success'
  },
  {
    value: 0,
    label: '否',
    type: ''
  },
]
export default {
  name: 'Dzx',
  mixins: [infoList],
  data() {
    return {
      listApi: getDzxList,
      flags: flags,
      dialogFormVisible: false,
      type: '',
      deleteVisible: false,
      multipleSelection: [],
      formData: {
        createdOn: new Date(),
        modifiedOn: new Date(),
        card: '',
        passwd: '',
        orderTime: '',
        name: '',
        phoneNumber: '',
        address: '',
        flag: false,
        order: '',
        mark: false,
        remark: '',
        createdBy: '',
        modifiedBy: '',
        count: 0,
      },
      disabledDate(time) {
        return time.getTime() > Date.now()
      },
      shortcuts: [
        {
          text: 'Today',
          value: new Date(),
        },
        {
          text: 'Yesterday',
          value: () => {
            const date = new Date()
            date.setTime(date.getTime() - 3600 * 1000 * 24)
            return date
          },
        },
        {
          text: 'A week ago',
          value: () => {
            const date = new Date()
            date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
            return date
          },
        },
      ],
    }
  },
  async created() {
    await this.getTableData()
  },
  methods: {
    onReset() {
      this.searchInfo = {}
    },
    // 条件搜索前端看此方法
    onSubmit() {
      this.page = 1
      this.pageSize = 10
      if (this.searchInfo.flag === "") {
        this.searchInfo.flag = null
      }
      if (this.searchInfo.mark === "") {
        this.searchInfo.mark = null
      }
      this.getTableData()
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    deleteRow(row) {
      this.$confirm('确定要删除吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.deleteDzx(row)
      })
    },
    async onDelete() {
      const ids = []
      if (this.multipleSelection.length === 0) {
        this.$message({
          type: 'warning',
          message: '请选择要删除的数据'
        })
        return
      }
      this.multipleSelection &&
      this.multipleSelection.map(item => {
        ids.push(item.ID)
      })
      const res = await deleteDzxByIds({ids})
      if (res.code === 0) {
        this.$message({
          type: 'success',
          message: '删除成功'
        })
        if (this.tableData.length === ids.length && this.page > 1) {
          this.page--
        }
        this.deleteVisible = false
        this.getTableData()
      }
    },
    async updateDzx(row) {
      const res = await findDzx({ID: row.ID})
      this.type = 'update'
      if (res.code === 0) {
        this.formData = res.data.redzx
        this.dialogFormVisible = true
      }
    },
    closeDialog() {
      this.dialogFormVisible = false
      this.formData = {
        createdOn: new Date(),
        modifiedOn: new Date(),
        card: '',
        passwd: '',
        orderTime: '',
        name: '',
        phoneNumber: '',
        address: '',
        flag: false,
        order: '',
        mark: false,
        remark: '',
        createdBy: '',
        modifiedBy: '',
        count: 0,
      }
    },
    async deleteDzx(row) {
      const res = await deleteDzx({ID: row.ID})
      if (res.code === 0) {
        this.$message({
          type: 'success',
          message: '删除成功'
        })
        if (this.tableData.length === 1 && this.page > 1) {
          this.page--
        }
        this.getTableData()
      }
    },
    async enterDialog() {
      let res
      switch (this.type) {
        case 'create':
          res = await createDzx(this.formData)
          break
        case 'update':
          res = await updateDzx(this.formData)
          break
        default:
          res = await createDzx(this.formData)
          break
      }
      if (res.code === 0) {
        this.$message({
          type: 'success',
          message: '创建/更改成功'
        })
        this.closeDialog()
        this.getTableData()
      }
    },
    openDialog() {
      this.type = 'create'
      this.dialogFormVisible = true
    }
  },
}
</script>

<style>
</style>
